import { Navigate } from "react-router-dom";
import React, { lazy } from "react";

import Home from "../views/Home";
import Login from "../views/Login/Login";
// import About from "../views/About";
const About = lazy(() => import("../views/About"));
const Pages1 = lazy(() => import("../views/Pages1"));
const Tom = lazy(() => import("../views/user/Tom"));
const UserList = lazy(() => import("../views/user/UserList"));
const ComponentCommunication = lazy(() => import("../views/comp/ComponentCommunication"));

// 这里也可以再最外层的app.jsx里面；在outlet组件外面包裹使用
const withComp = (comp) => (
  <React.Suspense fallback={"Loading........."}>{comp}</React.Suspense>
);

const router = [
  {
    path: "/",
    element: <Home></Home>,
    children: [
      {
        path: "/pages1",
        element: withComp(<Pages1></Pages1>),
        mate: { title: "主页" },
      },
      {
        path: "/about",
        element: withComp(<About></About>),
        mate: { title: "关于" },
      },
      {
        path: "/User",
        mate: { title: "用户" },
        children: [
          {
            path: "/User/Tom",
            element: withComp(<Tom></Tom>),
            mate: { title: "用户信息" },
          },
          {
            path: "/User/liat",
            element: withComp(<UserList></UserList>),
            mate: { title: "用户列表" },
          },
        ],
      },
      {
        path: "/Comp",
        mate: { title: "组件" },
        children: [
          {
            path: "/Comp/Comp1",
            element: withComp(<ComponentCommunication></ComponentCommunication>),
            mate: { title: "组件通信1" },
          },
          {
            path: "/Comp/Comp2",
            element: withComp(<UserList></UserList>),
            mate: { title: "组件通信2" },
          },
        ],
      },
    ],
  },

  {
    path: "/login",
    element: <Login></Login>,
  },
  // 路由输入错误，重定向到首页（也可以是404页面）
  {
    path: "*",
    element: <Navigate to="/pages1"></Navigate>,
  },
  // {
  //   path: "/",
  //   element: <Navigate to="/home"></Navigate>,
  // },
  // {
  //   path: "/home",
  //   element: <Home></Home>,
  // },
  // {
  //   path: "/about",
  //   element: withComp(<About></About>),
  // },
];

export default router;
